<template>
	<view class="box">
		<view class="list" v-for="(item,index) in list" :key="index" @click="chose(item)">
		 	<view class="left">
		 		 <view class=""> 
				  {{item.areaAddress || ''}}{{item.detailAddress}} 
				 <text v-if="item.defaultStatus">默认</text>
				 </view>
		 		<text>{{item.name}} {{item.mobile}}</text>
		 	</view>
		 	<view class="right" v-if="type!=='add'">
		 		<image src="@/static/edit.png" mode="widthFix" ></image>
		 	</view>
		</view>
		 
		<!-- <view class="nothing" v-if="total==0">- 暂无数据 -</view> -->
		<no-data v-if="list.length==0" title="您还没有添加地址信息哦～"></no-data>
		<view class="add" @click="tourl('/pages/my/myadress/addadress')"  >
		 	 <image src="@/static/add.png" mode="widthFix"></image>
			 新增地址
		</view>
		
	</view>
</template>

<script>
	import {addressdeleteAPI,addresslistAPI} from "@/api/user.js"
	import {mapMutations } from "vuex";
	
	export default {
		 
		data() {
			return {
				list:[],
				type:''
			}
		},
		onLoad(option) {
			this.type=option.type ? option.type :""
		},
		onShow() {
			this.getdata()
		},
		 
		methods: {
			...mapMutations("common",["SET_adressinfo"]),
			chose(item){
				if (this.type=="add") {
					this.SET_adressinfo(item)
					uni.navigateBack({})
					return
				}
				this.tourl('/pages/my/myadress/addadress?id='+item.id)
			},
			getdata(){
				addresslistAPI().then(res=>{
					this.list=res.data
				})
			},
			show(index){
				this.list[index].showedit=!this.list[index].showedit
				this.list=this.list.map((item,i)=>{
					return {
						...item,
						showedit:i==index ? item.showedit :false
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	background-color: #F7F8FA;
	 min-height: 100vh;
	padding: 20rpx;
}
.add{
	position: fixed;
	left: calc((100vw / 2) - 300rpx);
	bottom: 50rpx;
	width: 600rpx;
	height: 100rpx;
	background-color:$uni-color-primary;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	image{
		width: 35rpx;
		margin-right: 10rpx;
	}
}
.list{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	.left{
		flex: 1;
		line-height: 50rpx;
		view{
			font-weight: bold;
			font-size: 28rpx;
			text{
				color: #fff;
				background-color: $uni-color-primary;
				padding: 8rpx 26rpx;
				border-radius: 10rpx;
				margin-left: 10rpx;
			}
		}
		text{
			color: #7C8191;
			font-size: 24rpx;
		}
	}
	.right{
		padding-left: 20rpx;
		border-left: 1px solid #F2F2F2;
		position: relative;
		>image{
			width: 45rpx;
			height: 45rpx;
		}
	}
}
// .list:first-child{
// 	border:none;	 
// }
// .list:last-child{
// 	border:none;	 
// }
</style>
